
<template>
  <div  class="main-div">
    <Row>
      <Col span="24">
        <Card  dis-hover class="task-card">
          <div class="app-container">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline" size='mini' style="margin-left: -4.6%">
              <el-form-item label="名称">
                <el-input v-model="queryForm.name" clearable></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="queryForm.description" clearable></el-input>
              </el-form-item>
              <el-form-item label="模型key">
                <el-input v-model="queryForm.modelKey" clearable></el-input>
              </el-form-item>
              <el-form-item  >
                <el-button type="primary"  @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button size="mini" type="primary" @click="addBpmOftenFlow" ><Icon type="ios-add"/>
                  添加</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete"
                >删除
                </el-button>
              </el-col>
            </el-row>
            <el-row >
              <el-col>
                <el-table
                  class="n-table--border"
                  stripe
                  highlight-current-row
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  @selection-change="handleSelectionChange"

                >
                  <el-table-column type="selection" width="55" align="center"/>
                  <el-table-column
                    label="序号"
                    type="index"
                    width="50"
                    align="center">
                    <template slot-scope="scope">
                      <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="显示名称"
                    show-overflow-tooltip
                    >
                  </el-table-column>
                  <el-table-column
                    prop="所属人"
                    label="所属人"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                      <el-tag  v-if="scope.row.authority==null || scope.row.authority=='' " type="info">所有人</el-tag>
                      <el-tag  v-else type="info" >{{getDisName(scope.row.authority)}}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <el-button   size='mini' type='text' icon="el-icon-edit"   @click="edit(scope.row)">编辑</el-button>
                      <el-button  size='mini' type='text'  icon="el-icon-delete"   @click="remove(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>

                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="end">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="prev, pager, next, sizes, total, jumper"
                :total="total">
              </el-pagination>
            </el-row>



          </div>
        </Card>
      </Col>


    </Row>

  </div>

</template>

<script>
  import {loadWfModule,getWfModuleById,removeWfModule} from "@/api/bpmOftenFlow";

  export default {
    name: 'Task',
    components:{
    },

    data() {
      return {
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        tableData: [],
        tableHeight: 450,
        queryDate:[],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal:false,
        delMsgModal:false,
        delMsgModalId:"",
        chartData: {},
        sellerId: 0,
        shopName: [],
        messageTemplate:{},
        queryForm: {
          page: 1,
          limit: 10,
          type: '1',
          pageSize: 10,
          name: "",
          description: "",
          modelKey: "",
        },
        categoryData: [
        ]
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      edit:function(data){
        this.$router.push({name: 'addBpmOftenFlow', query: {t: new Date().getTime(),id:data.id}})

      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除规则需要使用的类编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return removeWfModule({ids: ids});
        }).then((response) => {
          if (response.code == 0) {
            this.msgNotifySuccess("操作成功");
            this.getData()
          }else{
            this.msgNotifyError(response.msg);
          }
        })
      },
      getDisName(row){
        try {
          if (row){
            const obj = JSON.parse(row)
            if (obj){
              if (obj.dispalyName){
                var str=obj.dispalyName;
                str = (str .substring(str .length - 1) == ',') ? str .substring(0, str .length - 1) : str ;

                return str
              }
            }
          }
        }catch (e) {

        }


      },

      remove:function(data){
        var ids = []
        ids.push(data.id);
        removeWfModule({ids: ids}).then((response) => {
          if (response.code == 0) {
            this.getData()
          }else{
            this.$message({"duration":'800',message:response.msg,type:'warning',customClass:'zZindex'});
          }
        })
      },
      addBpmOftenFlow:function(){
        this.$router.push({name: 'addBpmOftenFlow', query: {t: new Date().getTime()}})

      },
      openMsgDialog:function(id){
        //加载数据
        getMessageTemplateById(id).then((response) => {
          this.messageTemplate = response.data
        })
         this.msgModal=true;
      },
      delMsg:function(id){
        //加载数据
        this.delMsgModalId=id;
        this.delMsgModal=true
      },
      queryFormCreateTime:function(e){
        this.queryForm.tmpCreateTime=e;
      },
      queryFormEndTime:function(e){
        this.queryForm.tmpEndTime=e;
      },
      queryMethod:function(){
      this.getData();
      },

      getData: function () {
        loadWfModule(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      search() {
        this.queryForm.page = 1
        this.queryMethod()
      },
      reset() {
        this.queryForm.name = "";
        this.queryForm.queryForm = "";
        this.queryForm.whereSql = "";
        this.queryForm.subject = "";
        this.queryForm.procDefName = "";
        this.queryForm.tmpCreateTime = "";
        this.queryForm.tmpEndTime = "";
        this.queryForm.createTime = "";
        this.queryForm.endTime = "";
        this.queryForm.name = "";
        this.queryForm.description = "";
        this.queryForm.modelKey = "";
        this.queryDate = [];
        this.getData()
      }

    }

  }

</script>
<style lang="scss" scoped>
  .main-div {
    background-color: #f3f3f3!important;
  }
.task-card{
  margin-top: 10px;
}

</style>
